<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>剧本工坊 - AI剧本生成</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/generate.css">
</head>

<body>
  <!-- 导航栏 -->
  <nav class="navbar">
    <div class="nav-brand">剧本工坊</div>
    <ul class="nav-menu">
      <li><a href="index.html">首页</a></li>
      <li><a href="generate.html" class="active">生成剧本</a></li>
    </ul>
  </nav>

  <!-- AI对话主界面 -->
  <main class="chat-container">
    <div class="chat-header">
      <h1>AI剧本助手</h1>
      <p>告诉我您想要的剧本类型和主题，让我们一起创作精彩故事</p>
    </div>

    <!-- 聊天窗口 -->
    <div class="chat-window">
      <div class="chat-messages" id="chatMessages">
        <!-- AI的欢迎消息 -->
        <div class="message ai-message">
          <div class="avatar">AI</div>
          <div class="message-content">
            您好！我是您的AI剧本创作助手。请告诉我您想要创作的剧本类型（如古风武侠、现代都市、科幻题材等）和主要情节构思，我会协助您完成剧本创作。
          </div>
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="chat-input-area">
        <form id="scriptForm">
        <textarea id="userInput" placeholder="请输入您的想法..." rows="3"></textarea>
        <div class="button-group">
          <button id="clearChat" class="secondary-button">清空对话</button>
          <button id="sendMessage" class="primary-button">发送</button>
        </div>
      </form>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="footer">
    <div class="footer-content">
      <p>&copy; 2024 剧本工坊。保留所有权利。</p>
      <div class="social-links">
        <a href="#" target="_blank">Facebook</a>
        <a href="#" target="_blank">Twitter</a>
        <a href="#" target="_blank">Instagram</a>
      </div>
    </div>
  </footer>
  <script src="js/script.js"></script>
  <script src="js/generate.js"></script>
</body>

</html>